<template>
  <view class="movie-list" @click="getUrl(data)">
    <view class="movie-img">
      <image :src="data.logo" lazy-load mode="aspectFill"></image>
    </view>
    <view class="movie-info">
      <view class="mo-info-top">
        <view class="tiel">{{ data.name }}</view>
        <view class="movie-d">{{ data.showmark }}</view>
      </view>
      <view class="director">评分：{{ data.rating }}</view>
      <view class="director">导演：{{ data.director }}</view>
      <view class="to-star">主演：{{ data.actors }}</view>
      <view class="calss-item">
        <view class="classify-item">{{ data.duration }}分钟</view>
      </view>
    </view>
    <view class="movie-btns" v-if="showButton">购票</view>
  </view>
</template>

<script>
export default {
  props: {
    data: Object,
    showButton: Boolean
  },
  methods: {
    getUrl() {
      this.$emit('click', this.data);
    }
  }
}
</script>

<style lang="scss" scoped>

.movie-list {
  margin: 0 25rpx 25rpx 25rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 28rpx 32rpx;
  display: flex;
  align-items: center;

  .movie-img {
    width: 180rpx;
    height: 248rpx;

    image {
      width: 180rpx;
      height: 248rpx;
      border-radius: 20rpx;
    }

  }

  .movie-info {
    margin-left: 24rpx;
    width: 50%;

    .mo-info-top {
      display: flex;
      align-items: center;

      .tiel {
        width: 216rpx;
        color: #2D3039;
        font-size: 32rpx;
        font-weight: 600;
      }

      .movie-d {
        margin-left: 20rpx;
        border-radius: 6rpx;
        border: 1rpx solid #C4C4C4;
        color: #A6A8AE;
        font-size: 17rpx;

        .zimu {
          padding: 2rpx 6rpx;
        }

        .shuzi {
          background-color: #C4C4C4;
          padding: 0rpx 6rpx;
          color: #FFFFFF;
        }
      }
    }
  }
}

.director {
  color: #636775;
  font-size: 24rpx;
  margin-top: 16rpx;
}

.to-star {
  color: #787A82;
  font-size: 24rpx;
  margin-top: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calss-item {
  display: flex;
  align-items: center;
  margin-top: 12rpx;

  .classify-item {
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
    border: 2rpx solid #DADCE4;
    color: #A6A8AE;
    font-size: 20rpx;
  }
}

.movie-btns {
  margin-left: auto;
  width: 110rpx;
  height: 58rpx;
  background: linear-gradient(207deg, #FF9272 0%, #FC5421 100%);
  border-radius: 29rpx;
  text-align: center;
  line-height: 58rpx;
  color: #FFFFFF;
  font-size: 24rpx;
  font-weight: 550;
}

</style>
